<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>验证邮编和手机号码</title>
        <style type="text/css">
            body {
                line-height: 25px;
            }
            
            input {
                width: 120px;
                height: 16px;
            }
            
            div {
                color: #F00;
                font-size: 12px;
                display: inline-block;
                padding-left: 5px;
                ;
            }
            
            ul,
            li {
                list-style: none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>邮政编码：<input id="code" type="text" />
                <div id="divCode"></div>
            </li>
            <li>手机号码：<input id="mobile" type="text" />
                <div id="divMobile"></div>
            </li>
        </ul>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(document).ready(function() {
                $("#code").blur(function() {
                    var code = $(this).val();
                    var $codeId = $("#divCode");
                    var regCode = /^\d{6}$/;
                    if(regCode.test(code) == false) {
                        $codeId.html("邮政编码不正确，请重新输入");
                        return false;
                    }
                    $codeId.html("");
                    return true;
                });

                $("#mobile").blur(function() {
                    var mobile = $(this).val();
                    var $mobileId = $("#divMobile");
                    var regMobile = /^1\d{10}$/;
                    if(regMobile.test(mobile) == false) {
                        $mobileId.html("手机号码不正确，请重新输入");
                        return false;
                    }
                    $mobileId.html("");
                    return true;
                });
            });
        </script>
    </body>
</html>